<template>
<div>
  <div class="carousel" @mouseenter="clearInterval" @mouseleave="startInterval">
    <div class="slider" :style="{ transform: 'translateX(' + translateX + 'px)' }">
      <div v-for="item in images" :key="item" class="slide">
        <img :src="require('@/assets/' + item)" :alt="'轮播图 ' + item" />
      </div>
    </div>
    <div class="indicators">
      <span v-for="(item, index) in images" :key="item" :class="{ active: index === currentIndex }" @click="goTo(index)"></span>
    </div>
  </div>
    <img src="../assets/mate60.png" alt="mate60">
    </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'rhua',
  data () {
    return {
      images: [
        'phone/phone1.png',
        'phone/phone2.png',
        'phone/phone3.png',
        'phone/phone4.png'
      ],
      translateX: 0,
      intervalId: null,
      currentIndex: 0
    }
  },
  mounted () {
    this.startInterval()
  },
  methods: {
    next () {
      this.translateX -= 450// 根据轮播图宽度调整值
      this.currentIndex = (this.currentIndex + 1) % this.images.length
      // 如果是最后一张，切换到第一张
      if (this.currentIndex === 0) {
        this.translateX = 0
      }
    },
    prev () {
      this.translateX += 450// 根据轮播图宽度调整值
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length
      // 如果是第一张，切换到最后一张
      if (this.currentIndex === this.images.length - 1) {
        this.translateX = -this.currentIndex * 450
      }
    },
    startInterval () {
      this.intervalId = setInterval(() => {
        this.next()
      }, 2000) // 设置轮播间隔时间
    },
    clearInterval () {
      clearInterval(this.intervalId)
    },
    goTo (index) {
      this.currentIndex = index
      this.translateX = -index * 450
    }
  },
  beforeDestroy () {
    clearInterval(this.intervalId)
    this.intervalId = null
  }
}
</script>

<style scoped>
.carousel {
  width: 450px; /* 根据设计调整宽度 */
  overflow: hidden;
  position: relative;
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  flex: 0 0 auto;
  width: 100%; /* 根据设计调整宽度 */
}

img {
  width: 100%; /* 根据设计调整宽度 */
  height: auto;
}

.indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.indicators span {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.indicators span.active {
  background-color: #333;
}
</style>
